<template>
	<view class="index">
		<scroll-view
			scroll-y="true"
			class="scroll"
			:style="{ height: height + 'px' }"
			:scroll-top="screenTop"
		>
	
			<!-- 学校申报 -->
			<view class="box pb50">
				<!-- 每个学校的盒子 -->
				<view
					class="mid borderbox auto mt20"
					v-for="(item, index) in dataList"
					:key="index"
					@click="handerStudy(item)"
				>
					<!-- 学校名称 -->
					<view class="mt30 ml30"><subtitle :title="item.school"></subtitle></view>
					<!-- 中间组件部分 -->
					<view @click.stop="handerStop"><chares :data="item" @getSum="getSum"></chares></view>

					<!-- 中间的线 -->
					<view class="lines"></view>
					<!-- 下半区的盒子 -->
					<view class="dflex flexw borderbox mt40 jcsb pl30">
						<view
							v-for="(itm, index) in item.classes"
							:key="itm.cid"
							class="itm-box mt24 dflex alc"
						>
							<view class="circle" :style="{ backgroundColor: itm.color }"></view>
							<view class="pl16 fs28 fw500 color dflex">
								<view>{{ itm.name }}</view>
								<view class="ml10">{{ itm.value + '张' }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 大盒子结束 -->
			</view>
		</scroll-view>
		<tabbar :select="1"></tabbar>
	</view>
</template>

<script>
import chares from '../components/chares/chares.vue';
import subtitle from '@/components/subtitle/subtitle.vue';
import tabbar from '@/components/tabbar/tabbar.vue';
import dataList from './apply.js';
export default {
	components: { chares, subtitle, tabbar },
	data() {
		return {
			screenTop: 0,
			height: '',
			dataList: dataList.dataList,
			sum: ''
		};
	},
	methods: {
		handerStudy(item) {
			uni.setStorageSync('classes', item.classes);
			uni.navigateTo({
				url: `/pagesA/studydata/studydata?id=${item.id}&school=${item.school}`
			});
		},
		getSum(event) {
			this.sum = event;
		},
		// 阻止点击图标冒泡
		handerStop() {
			console.log('helloword');
		}
	},
	onShow() {
		var that = this;
		uni.getSystemInfo({
			success(res) {
				that.height = res.windowHeight;
				that.screenTop = 0;
			}
		});
	}
};
</script>
<style lang="scss">
page {
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
}
.box {
	padding-bottom: 128rpx;
}
.mid {
	width: 690rpx;
	height: 644rpx;
	background: #ffffff;
	box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(51, 51, 51, 0.25);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	overflow: hidden;
}
.mid:first-child {
	margin-top: 20rpx;
}
.bgitem {
	width: 64rpx;
	height: 32rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.left .text:nth-child(4) {
	margin-top: 36rpx;
	margin-bottom: 36rpx;
}
.left .text:nth-child(2n + 2) {
	margin-left: 20rpx;
}

.circle {
	width: 20rpx;
	height: 20rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.itm-box {
	width: 35%;
}
.lines {
	width: 690rpx;
	height: 2rpx;
	background-color: #eaeaea;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: red;
}
</style>
